// header样式
//header样式1
header{
    width:100%;
    height: 150px;
    background:rgba(0,0,0,.3);
    position: fixed;
	z-index: 2;
    top:0;
    left:0;
    & .top{
        height:30px;
        border-bottom:1px solid #423229;
        line-height: 30px;
        & .wraper{
            width:980px;
            margin:0 auto;
            color:#FFF;
            font-size:14px;
            font-style:normal;
            & a{
                color:#fff;
                &:hover{
                    color: #ffe100;
                }
               
            }
        
            & .left{
                float:left;
                & span:nth-child(1){
                    margin-right:20px;
                    float: left;
                    & em{
                        margin-right:10px;
                        color: white;
                        
                    }
                    & b{
                        display:inline-block;
                        padding-right: 25px;
                        cursor: pointer;
                        color: white;
                       
                        &::after{
                            content: '';
                            width:14px;
                            height:6px;
                            display:inline-block;
                            background:url(../images/icon.png) no-repeat -36px -67px;
                        }
                    }
                }
                & span:nth-child(2){
                    float: left;
                    display: flex;
                    width:86px;
                    height:30px;
                    align-items: center;
                    justify-content: space-around;
                    & i{
                        display: inline-block;
                        border-right:1px solid;  
                        height:14px;
                        color:white;
                    }
                   
                }
                
            }
            & .right{
                float:right;
                width:350px;
                height:30px;
               
                // display: flex;
                // justify-content: space-between;
                & ul{
                    width:400px;
                    height:30px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    & li{
                        float:left;
                        color:white;
						&:first-child em{
                        font-style:normal;
                        font-weight:600;
                        color:white;
						}
                    }
                    & span{
						float: left;
                        height:14px;
                        border-right:1px solid;
                        color:white;
                    }
                }
                
            }
        }
    }
    & .bottom{
        width:830px;
        height:119px;
        margin:0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
		
		& li:last-child{
			position: relative;
			//此处有两种样式
			& .search{
               
				position: absolute;
				top:-18px;
				//鼠标没有移入时
				& .not_dis{
					width: 0px;
					background: #FFF;
					border-radius: 20px;
					height:30px;
					line-height:30px;
					border: none;
					padding: 5px 0px;
					outline: none;
                }
                
				//输入框默认状态下是隐藏的
				// & .is_dis{
				// 	width:130px;
				// 	padding: 5px 50px 5px 20px;
				// 	border-radius: 20px;
				// 	height:30px;
				// 	line-height:30px;
                //     border: none;
                //     outline: none;
				// 	display: none;
				// }
				//鼠标移入搜索图标时，图标慢慢移到输入框右端，同时输入框慢慢出现，最终1样式如上（js）
				& i{
					position: absolute;
					top:8px;
					width:24px;
					height:24px;
					background: url(../images/icon.png);
                    cursor: pointer;
                    
				}
			}
		}
        & a{
            color:#ffd400;
			padding:10px 22px;
			font-size:18px;
			
			&:hover{
				border-bottom:1px solid #ffe100;
			}
        }
		& .cur a{
			border-bottom: 1px solid #ffe100;
		}
        
    }
    
}
//header样式2（当滚动条划到一定距离时就会改变头部样式：字体和背景不同）
